<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>推荐商家</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>推荐商家</title>
    <link rel="stylesheet" href="../css/base.css">
    <script src="../js/jquery-2.2.3.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/rem.js"></script>
    <style>
        .container {
            width: 3rem;
            height: 3rem;
            margin: 0 auto;
            margin-top: 1.5rem;
        }
        .container img {
            width: 100%;
        }
        .nav_ul {
            width: 100%;
            height: .4rem;
            background-color: #ffffff;
            display: flex;
            line-height: .4rem;
        }
        .nav_ul_li {
            width: 50%;
            text-align: center;
            font-size: .14rem;
            color: #000000;
            border-right: 1px solid #c2c2c2;
        }
        .nav_ul_li_active {
            color: #ffffff;
            background-color: #EB4748;
        }
        .nav_ul_li:last-child {
            border: 0;
        }
    </style>
</head>

<body style="background: #F8F8F8;overflow:hidden;">
    <div class="head">
        <a href="javascript:history.back(-1)">
            <div class="h-left"></div>
        </a>
        <div class="h-middle">推荐商家</div>
        <div class="h-right"></div>
    </div>
    <div style="height: .44rem;"></div>
    <ul class="nav_ul">
        <li class="nav_ul_li nav_ul_li_active"  onclick="upClick()">线上商家推荐</li>
        <li class="nav_ul_li"  onclick="downClick()">线下商家推荐</li>
    </ul>
    <div class="cont-box">
        <div class="cont-item" >
            <div class="container">
                <img class="ewmImg" src=""  alt="">
            </div>
        </div>
        <div class="cont-item">
            <div class="container" >
                <img class="ewmImg" src=""  alt="">
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(".nav_ul li").mouseover(function () {
                //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
                var _index = $(this).index();
                //让内容框的第 _index 个显示出来，其他的被隐藏
                $(".cont-box>.cont-item").eq(_index).show().siblings().hide();
                //改变选中时候的选项框的样式，移除其他几个选项的样式
                $(this).addClass("nav_ul_li_active").siblings().removeClass("nav_ul_li_active");
            });
        });
        $.ajax({
            url: SURL + '/jfd/users/recommendEnQRCodeShop',
            dataType: 'json',
            type: 'get',
            data: {
                userId: localStorage.getItem('userId'),
                type: 1
            },
            success: function (res) {
                $('.ewmImg').attr('src',"data:image/jpeg;base64,"+res.enQRCode)
            }
        })
        function upClick() {
            $.ajax({
                url: SURL + '/jfd/users/recommendEnQRCodeShop',
                dataType: 'json',
                type: 'get',
                data: {
                    userId: localStorage.getItem('userId'),
                    type: 1
                },
                success: function (res) {
                    $('.ewmImg').attr('src',"data:image/jpeg;base64,"+res.enQRCode)
                }
            })
        }
        function downClick() {
            $.ajax({
                url: SURL + '/jfd/users/recommendEnQRCodeShop',
                dataType: 'json',
                type: 'get',
                data: {
                    userId: localStorage.getItem('userId'),
                    type: 2
                },
                success: function (res) {
                    $('.ewmImg').attr('src',"data:image/jpeg;base64,"+res.enQRCode)
                }
            })
        }

    </script>
</body>

</html>
